<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>02-常见的行内元素和块级元素</title>
    <style>
      img {
        width: 200px;
      }
      body {
        font-size: 0;
      }
    </style>
  </head>
  <body>
    <!-- 
            常见的行内元素：
                a span strong  b  i em ...
                特点：
                    1、设置宽高不起作用
                    2、进行一行排列
                    3、行内元素禁止包着块元素，a标签除外
                设置方式：display:inline
            常见的块元素:
                div p h1-h6 table ul....
                特点：
                    1、可以设置宽高，默认不设置宽的时候，独占一行
                    2、多个元素垂直排列
                    3、可以相互嵌套，可以包含行内元素
                设置方式：display:block
            常见的行内块元素:
                img td input
                特点：
                    1、可以进行宽高设置
                    2、多个元素一行排列
                问题：
                    多个元素之间会有一个空白间隙
                    原因：
                        浏览器会把换行识别为文本节点，浏览器都有默认的字体大小，所以会产生默认字体大小的间距
                    解决：
                        操作字体：设置font-size：0
         -->

    <img src="./img/1.jpg" alt="" />
    <img src="./img/2.jpg" alt="" />
  </body>
</html>
